<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myweb</title>
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
    <script src="../static/js/bootstrap-3.3.7/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../static/js/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
    <div id="app" class="container">
        <!-- <form class="form-inline" method="post">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="name" placeholder="游戏名称">
        </form> -->
        <table class="table table-hover">
            <tr v-for="item in games">
                <td v-text="item.name"></td>
                <td v-text="item.path"></td>
                <td v-text="item.introduction"></td>
            </tr>
        </table>
        <input type="button" value="提交" @click="getGames">
    </div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: [],
            games: []
        },
        methods: {
            getGames: function(){
                $.ajax({
                    type: 'POST',
                    url: '/game/listGames',
                    data: '',
                    success: function(res){
                        this.data.games = res
                        console.log('listGames',res)
                    }
                })
            },
            rev: function(){
                this.msg = this.msg.split('').reverse().join('')
            }
        },
    })
</script>